<!--店铺设置-->
<template>
        <el-row style="height: 100%">
            <span class="first">系统管理 / 店面设置</span>
            <div class="align-left" @click="returnHandle">
                <i class="el-icon-back"></i><span>返回</span>
            </div>
            <div class='content'>
                <div ref="topHeight">
                    <el-row>
                        <el-form :inline="true" class="demo-form-inline addData searchForm">
                            <el-row>
                                <el-col class="search-input">
                                    <el-button class="btnSearch right" type="primary" size="small" @click="submitHandle">提交</el-button>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-row>
                </div>
                <!--:data="tableData.filter(data => !search || data.store_name.toLowerCase().includes(search.toLowerCase()))"-->
                <el-table 
                    :height="height"
                    :data="tableData"
                    style="width:100%" 
                    tooltip-effect="dark"
                    v-loading="loading"
                    ref="multipleTable"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column prop="name" label="店铺名称" align="left"></el-table-column>
                    <!--<el-table-column
                        align="right">
                        <template slot="header" slot-scope="scope">
                            <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入关键字搜索"/>
                        </template>
                    </el-table-column>-->
                </el-table>
            </div>
        </el-row>
</template>
<script>
export default {
    props: ['user_id'],
    data() {
        return {
            search: '',
            multipleSelection: [],
            height: 'calc(100% - 50px)',
            loading:false,
            form: {
                store_name: ''
            },
            tableData: [], //查询列表
        }
    },
    mounted() {
        this.initData()
    },
    methods: {
        returnHandle() {
            this.$emit('status',false)
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        initData() {
            const _this = this
            _this.loading = true
            _this.$http.get(_this.GLOBAL.REQUESTURL +"/managementStore/getStoreSetList",{
                id: _this.user_id
            })
            .then(res => {
                _this.loading = false;
                _this.tableData = res.data;
                //  回显选中
                _this.$nextTick(function() {
                    _this.tableData.forEach(item => {
                        //如果数据中的isInclude == 1的话 让这一列选中
                        if (item.isInclude == 1) {
                        //multipleTable 是这个表格的ref属性 true为选中状态
                            _this.$refs.multipleTable.toggleRowSelection(item, true);
                        }
                    })
                })
               
            }).catch(err => {
                _this.loading = false
                _this.tableData = []
            })
        },
        submitHandle() {
            const _this = this
            const checkedArray = [];
            _this.multipleSelection.forEach(item => {
                checkedArray.push(item.id)
            });
            if(_this.multipleSelection.length  > 0) {
                _this.$http.post(_this.GLOBAL.REQUESTURL +"/managementStore/setManagementStore",{
                    storeIds: checkedArray,
                    userId: _this.user_id,
                })
                .then(res => {
                    if(res.code == 200) {
                        _this.$message.success( res.msg );
                        _this.initData();
                    } else {
                        _this.$message.info( res.msg );
                    };
                }).catch(err => {
                    _this.$message.error('修改失败!')
                })
            } else {
                _this.$message.info('至少选择一个店铺！')
            };
        },
    }
}
</script>
<style scoped>
    .checkboxList {
        width: 200px;
        height: 30px;
        line-height: 30px;
        background: #F6FAFF; 
        margin: 6px 4px;
    }
    .align-left {
        color: #00BB35;
        text-align: left;
        padding: 0 10px 10px 10px;
        cursor: pointer
    }
</style>